{include file="header" title="$title" /}
    <div class="i-card-main">
        <p><i class="iconfont icon-page"></i> RANKINGS PAGE</p>
    </div>
    <div class="i-card-main">
        <div class="i-card-title">
            <p>Rankings</p>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>用户名</th>
                    <th>分数</th>
                    <th>最后得分</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <nav id="page" style="display: none;">
            <ul class="pagination justify-content-center">
            </ul>
        </nav>
    </div>
</div>
{include file="footer" /}
<script>
$(".loading").show();
$(".i-card-main").eq(1).hide();

$(document).ready(function(){
    $.get("/api/v1/getAllRank?page=" + page, function(res){
        if(res.code != 200 ){
            layer.msg(res.msg);
            $(".loading").hide();
            return;
        }

        const data = res.data.data;
        let html = "";
        for(let i = 0; i < data.length; i++){
            html += "<tr><th scope='row'>" + (i+1) + "</th><td><a href='/home/" + data[i].id + "' target='_blank'>" + data[i].username + "</a></td><td>" + data[i].scores + "</td><td>" + timestampToTime(data[i].time) + "</td></tr>";
        }
        $("tbody").html(html);
        setTimeout(function () {
            $(".loading").hide();
            $(".i-card-main").eq(1).show();
            pages(res)
        }, 500);
    });
});
</script>
</body>
</html>